<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title th:text="#{accountpage.title}"></title>
        <meta name="description" content="" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        
        <!--[if lte IE 9]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen" /><![endif]-->

		<link rel="stylesheet" href="css/css.css" th:href="@{/css/min.css}"/>            
        <script src="http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js" th:src="@{http://lib.sinaapp.com/js/jquery/1.9.0/jquery.min.js}"></script>
        <script th:inline="javascript">/*<![CDATA[*/
        window.jQuery || document.write('<script src="'+ /*[[@{/js/vendor/jquery-1.9.0.min.js}]]*/ 'js/vendor/jquery-1.9.0.min.js'
        		+'"><\/script>')
        /*]]>*/</script>
        <script type="text/javascript" th:src="@{/js/econgen.js}"></script>
        <script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
        $(function(){
        	$('#btn-addAccount').bind('click', function(){
        		var accountId = $('#accountId').val(), brokerId = $('#broker').val(), accountNo = $('#account-no').val(), selfDesc = $('#account-self-desc').val();
        		if(!brokerId || brokerId == ''){
        			alert(/*[[#{accountpage.js.broker.select}]]*/''
        				);
        			return;
        		}
        		if(!accountNo || accountNo == ''){
        			alert(/*[[#{accountpage.js.accountno.blank}]]*/''
        				);
        			return;
        		}
        		if(!selfDesc || selfDesc == ''){
        			selfDesc = accountNo;
        		}
        		var min2pay = $('#account-min2pay').val();
        		if(min2pay != '' && isNaN(min2pay)){
        			alert(/*[[#{accountpage.js.mintopay.nan}]]*/''
        					);
        			return;
        		}
        		var url = /*[[@{/account/addNewAccount}]]*/'./account/addNewAccount';
        		if(accountId && accountId != ''){
        			url = /*[[@{/account/modifyAccountName}]]*/'./account/modifyAccountName';
        		}
        		if(confirm(/*[[#{accountpage.js.submit.confirm}]]*/''
        			)){
        			$('#accountId').val('');
            		$('#broker').val('').attr('disabled', false);
            		$('#account-no').val('').attr('disabled', false);
            		$('#account-self-desc').val('').attr('disabled', false);
            		$('#btn-cancle').hide();
            		var data = {
            				accountNo: accountNo
       						, selfDesc: selfDesc
       						, brokerId: brokerId
       						, minToPay: min2pay
            				}
            		if(accountId != '') {
            			data.id = accountId;
            		}
        			$.ajax({
        				url: url
       					, type: 'POST'
       					, data: data
       					, dataType: 'json'
       					, error: function(jqXHR, textStatus, errorThrown){
       						alert(/*[[#{accountpage.js.submit.error}]]*/''
       							);
       					}
       					, success: function(data, textStatus, jqXHR){
       						if(data && data.result == 1){
       							if(accountId == ''){
	       							alert(/*[[#{accountpage.js.add.success}]]*/''
	       								);
	       							var li = $('<li>').attr('data', data.accountId).appendTo($('#account-list ul'));
	       							$('<div class="op"><button>'+ /*[[#{accountpage.js.modify.text}]]*/''
		       							+'</button><button>'+ /*[[#{accountpage.js.delete.text}]]*/''
		       							+'</button></div>').appendTo(li);
	       							$('<h3>').html(selfDesc).appendTo(li);
	       							$('<div>').append($('<label>').html(/*[[#{accountpage.js.accountno.text}]]*/''
	       								)).append($('<span>').addClass('accountNo').html(accountNo)).appendTo(li);
	       							$('<div>').append($('<label>').html(/*[[#{accountpage.js.broker.text}]]*/''
	       								)).append($('<span>').addClass('brokerName').html($("#broker").find("option:selected").text())).appendTo(li);
	       							$('<div>').append($('<label>').html(/*[[#{accountpage.js.status.text}]]*/''
	       								)).append($('<span>').html(/*[[#{accountpage.js.new.text}]]*/''
	       								)).appendTo(li);
	       							$('<div>').append($('<label>').html(/*[[#{accountpage.js.totalCommission.text}]]*/''
	       								)).append($('<span>').html('0.0000')).appendTo(li);
	       							$('<div>').append($('<label>').html(/*[[#{accountpage.js.lastreturned.text}]]*/''
	       								)).append($('<span>').html('0.00')).appendTo(li);
	       							$('<div>').append($('<label>').html(/*[[#{accountpage.content.account.mintopay}]]*/''
	       								)).append($('<span>').addClass('min2pay').html(min2pay)).appendTo(li);
       							} else {
       								alert(/*[[#{accountpage.js.modify.success}]]*/''
       								);
       							}
       						} else {
       							alert(/*[[#{accountpage.js.add.failed}]]*/''
       							);
       						}
       					}
        			});
        		}
        	});

            $('#account-list li').bind('click', function(){
            	var accountId = $(this).attr('data');
            	window.location.href=/*[[@{/account/comm/}]]*/''
            		+accountId+'/0';
            });
        	$('#account-list li').delegate('.op button', 'click', function(event){
        		event.stopPropagation();
        		if($(this).html()== /*[[#{accountpage.js.delete.text}]]*/''
        			){
        			var $this = $(this);
        			var accountId = $this.parent().parent().attr('data');
        			if(confirm(/*[[#{accountpage.js.delete.confirm}]]*/''
        				)){
        				$.ajax({
        					url: /*[[@{/account/removeAccount}]]*/'./account/removeAccount'
	       					, type: 'POST'
	       					, data: {
	       						accountId: accountId
	       					}
	       					, dataType: 'json'
	       					, error: function(jqXHR, textStatus, errorThrown){
	       						alert(/*[[#{accountpage.js.delete.error}]]*/''
	       							);
	       					}
	       					, success: function(data, textStatus, jqXHR){
	       						if(data && data.result == 1){
	       							alert(/*[[#{accountpage.js.delete.success}]]*/''
	       									);
	       							$this.parent().parent().remove();
	       						} else {
	       							alert(/*[[#{accountpage.js.delete.failed}]]*/''
	       								);
	       						}
	       					}
        				})
        			}
        		} else {
        			var $parent = $(this).parent().parent();
        			var selfDesc = $parent.find('h3').text(), 
        				accountNo = $parent.find('.accountNo').text(), 
        				brokerName = $parent.find('.brokerName').text(),
        				min2pay = $parent.find('.min2pay').text(),
        				accountId = $parent.attr('data');
        			$('#broker').val($('#broker option:contains("'+brokerName+'")').val()).attr('disabled', true);
        			$('#account-no').val(accountNo).attr('disabled', true);;
        			$('#account-self-desc').val(selfDesc);
        			$('#accountId').val(accountId);
        			$('#account-min2pay').val(min2pay);
        			$('#btn-cancle').show();
        		}
        	});
        	
        	$('#btn-cancle').bind('click', function(){
        		$('#accountId').val('');
        		$('#broker').val('').attr('disabled', false);
        		$('#account-no').val('').attr('disabled', false);
        		$('#account-self-desc').val('').attr('disabled', false);
        		$('#btn-cancle').hide();
        	});
        });
        
        /*]]>*/</script>
    </head>
    <body>
        <header th:substituteby="common/template::header"></header>
        
        <div class="container">
       		<h1 class="align-center" th:text="#{accountpage.content.accountmanage}"></h1>
        	<div class="row">
        		<div class="twelvecol" id="add-account">
        			<ul>
        				<li class="onecol">
        					<input type="hidden" id="accountId"/>
        				</li>
        				<li class="twocol">
        					<label><strong th:text="#{accountpage.content.broker}"></strong><span class="required">*</span></label>
							<select id="broker">
								<option></option>
			            		<option th:each="broker:${brokerList}" th:value="${broker.idStr}" th:text="${broker.name}"></option>
							</select>
        				</li>
        				<li class="twocol">
        					<label><strong th:text="#{accountpage.content.accountno}"></strong><span class="required">*</span></label>
        					<input id="account-no"/>
        				</li>
        				<li class="twocol">
        					<label><strong th:text="#{accountpage.content.account.selfdesc}"></strong><span class="required">*</span></label>
        					<input id="account-self-desc"/>
        				</li>
        				<li class="twocol">
        					<label><strong th:text="#{accountpage.content.account.mintopay}"></strong></label>
        					<input id="account-min2pay"/>
        				</li>
        				<li class="threecol last">
						    <button id="btn-addAccount" class="form-btn" th:text="#{accountpage.content.submit}"></button>
						    <button id="btn-cancle" class="form-btn hide" th:text="#{accountpage.content.cancel}"></button>
        				</li>
        			</ul>
        		</div>
        	</div>
        	<div class="row">
        		<div class="twelvecol" id="account-list">
        			<ul>
        				<li th:each="account : ${accountList}" th:title="#{accountpage.content.table.tip}" th:data="${account.id}">
        					<div class="op"><button th:text="#{accountpage.js.modify.text}"></button><button th:text="#{accountpage.js.delete.text}"></button></div>
    	   					<h3 th:text="${account.selfDesc}"></h3>
        					<div><label th:text="#{accountpage.js.accountno.text}"></label> <span class="accountNo" th:text="${account.accountNo}"></span></div>
        					<div><label th:text="#{accountpage.js.broker.text}"></label> <span class="brokerName" th:text="${account.broker.name}"></span></div>
        					<div><label th:text="#{accountpage.js.status.text}"></label> <span th:text="${#strings.isEmpty(account.active)}?#{accountpage.status.confiming}:(${account.active}?#{accountpage.status.actived}:#{accountpage.status.notActive})"></span></div>
        					<div><label th:text="#{accountpage.js.totalCommission.text}"></label> <span th:text="${account.totalCommission}"></span></div>
        					<div><label th:text="#{accountpage.js.lastreturned.text}"></label> <span th:text="${account.lastPay}"></span></div>
        					<div><label th:text="#{accountpage.content.account.mintopay}"></label> <span class="min2pay" th:text="${account.minToPay}"></span></div>
        				</li>
        			</ul>
        		</div>
        	</div>
        </div>

        <footer th:substituteby="common/template::footer"></footer>
        
    </body>
</html>
